<template>
    <div class="box">
        <div class="header">
            <img @click="router.back()" src="@/assets/img/Cart/icon_arrow_left_black.png" alt="">
            <span v-text="'购物车'"></span>
            <span @click="isDelete = !isDelete" v-text="isDelete ? '完成' : '编辑'" class="edit"
                v-show="Cart.listMain.length > 0"></span>
        </div>
        <div class="container-none" v-show="!token">
            <img src="@/assets/img/Cart/no_result_cart3.png" alt="">
            <p>登录后才能看到商品哦~</p>
            <button @click="goLogin">立即登录</button>
        </div>
        <div class="container-none" v-show="Cart.listMain.length <= 0 && token">
            <img src="@/assets/img/Cart/no_result_cart3.png" alt="">
            <p>目前没有添加商品哦~</p>
            <button @click="goHome">去首页逛逛</button>
        </div>
        <div class="container" v-show="Cart.listMain.length > 0 && token">
            <ul class="list">
                <li class="item" v-for="item in Cart.listMain" :key="item.id">
                    <div class="item-left">
                        <!-- 这里是选择键 -->
                        <!-- 正常选项下的键 -->
                        <img @click="chooseHandler(item.id)" class="checked-box" v-show="!isDelete"
                            style="width:20px;height: 20px" :src="checkedHandler(item.id)" alt="">
                        <!-- 编辑状态下的键 -->
                        <img @click="chooseEditHandler(item.id)" class="checked-box" v-show="isDelete"
                            style="width:20px;height: 20px" :src="editcheckedHandler(item.id)" alt="">
                        <img style="width: 90px;height: 90px;" :src="item.avatar" alt="">
                    </div>
                    <div class="info">
                        <p>{{ item.name }}</p>
                        <p>{{ item.brief }}</p>
                        <div class="count-box">
                            <span>￥{{ item.price }}</span>
                            <MiCount @decrease="decreaseHandler(item.id)" @increase="increaseHandler(item.id)"
                                :count="item.count">
                            </MiCount>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="footer" v-show="Cart.listMain.length > 0 && token">
            <div class="check-all">
                <img v-show="!isDelete" @click="allChecked = !allChecked"
                    :src="allChecked ? require('@/assets/img/Cart/checked.png') : require('@/assets/img/Cart/un_checked.png')"
                    alt="">
                <img v-show="isDelete" @click="allEditChecked = !allEditChecked"
                    :src="allEditChecked ? require('@/assets/img/Cart/checked.png') : require('@/assets/img/Cart/un_checked.png')"
                    alt="">
                <span>全选</span>
            </div>
            <p v-show="!isDelete" class="total">合计:<span>￥{{ Cart.Subtotal }}</span></p>
            <button v-show="!isDelete" @click="settlementHandler">结算<span>({{ Cart.total }})</span></button>
            <button v-show="isDelete" @click="Cart.remove">删除</button>
        </div>
    </div>
</template>
<script setup lang="ts">
import MiCount from '@/components/MiCount/MiCount.vue'
import { onMounted, ref, computed, watch } from 'vue';
import { useCart } from '@/store'
import { CartApi } from '@/api';
import { useRouter } from 'vue-router';


const router = useRouter()
const Cart = useCart()
const isDelete = ref<boolean>(false)
const token = ref<string | null>(sessionStorage.getItem('token'))

onMounted(async () => {
    if (!token) return
    Cart.init()
})

// 选择框全选状态
const allChecked = computed({
    get: () => {
        return Cart.listChecked.every((item: Status.listChecked) => item.checked === true)
    },
    set: (newValue) => { Cart.listChecked.forEach((item: Status.listChecked) => item.checked = newValue) }
})
const allEditChecked = computed({
    get: () => {
        return Cart.listChecked.every((item: Status.listChecked) => item.editChecked === true)
    },
    set: (newValue) => { Cart.listChecked.forEach((item: Status.listChecked) => item.editChecked = newValue) }
})

// 选择框图片地址
const checkedHandler = (id: number): string => {
    const checked = Cart.listChecked.find((item: Status.listChecked) => item.id === id)?.checked
    if (checked) return require('@/assets/img/Cart/checked.png')
    else return require('@/assets/img/Cart/un_checked.png')
    // return 地址
}
const editcheckedHandler = (id: number): string => {
    const editChecked = Cart.listChecked.find((item: Status.listChecked) => item.id === id)?.editChecked
    if (editChecked) return require('@/assets/img/Cart/checked.png')
    else return require('@/assets/img/Cart/un_checked.png')
}

//点击商品的按钮选中的一系列列函数
const chooseHandler = (id: number): void => {
    const i = Cart.listChecked.findIndex((item: Status.listChecked) => item.id === id)
    Cart.listChecked[i].checked = !Cart.listChecked[i].checked
}

const chooseEditHandler = (id: number) => {
    const i = Cart.listChecked.findIndex((item: Status.listChecked) => item.id === id)
    Cart.listChecked[i].editChecked = !Cart.listChecked[i].editChecked
}

//数量减少、增加
const increaseHandler = async (id: number) => {
    await CartApi.increase(id)
    const i = Cart.listMain.findIndex(item => item.id === id)
    Cart.listMain[i].count++
}
const decreaseHandler = async (id: number) => {
    await CartApi.decrease(id)
    const i = Cart.listMain.findIndex(item => item.id === id)
    Cart.listMain[i].count--
}

const goHome = async () => router.push({ name: 'Home' })

const goLogin = async () => router.push({ name: 'Login' })

const settlementHandler = () => {
    router.push({name:'Settlement'})
}

</script>

<style lang="stylus" scoped>
.box
    background-color: rgb(244, 244, 244);
    height 100%
    width 100%
    display flex
    flex-direction column

.header
    height 44px
    display flex
    justify-content center
    align-items center
    position relative
    font-size 18px

.header img
    height 42px
    width 42px
    position absolute
    top 50%
    left 0
    transform translateY(-50%)

.edit
    position absolute
    top 50%
    right 0
    transform translateY(-50%)
    color: rgba(0, 0, 0, 0.8);
    font-size: 14px
    padding-right 11px

.container-none
    padding 40px 0
    display flex
    flex-direction column
    justify-content center
    align-items center

.container-none img
    height 90px
    width 90px

.container-none p
    padding-top 13px
    font-size: 14px;
    color #666

.container-none button
    margin-top 14px
    border-radius: 16px;
    padding 8px 14px
    color: rgb(102, 102, 102);
    background-color #fff
    border 1px solid rgb(102, 102, 102)

.container
    margin: 12px
    flex-grow 1

.item
    border-radius 10px
    margin-top 10px
    display flex
    padding 10px
    background-color: rgb(255, 255, 255);

.checked-box
    padding 0 12px

.item-left
    display flex
    align-items center
    height 90px

.info
    flex-grow 1
    display flex
    flex-direction column
    justify-content space-between
    

.info p:first-child
    color: rgb(51, 51, 51);
    flex-direction: row;
    font-size: 14px;
    line-height: 19px;
    

.info p:nth-child(2)
    color: rgb(102, 102, 102);
    font-size: 12px;
    line-height: 17px;
    max-width: 171px;


.count-box
    display flex
    justify-content: space-between;
    align-items center

.count-box span
    color red

.footer
    height 40px
    background-color #fff
    display flex
    justify-content space-between
    align-items center

.check-all
    padding-left: 24px;
    display flex
    font-size 12px
    justify-content center
    align-items center
.check-all img
    height 20px
    width 20px
    margin-right: 6px;

.total 
    flex-grow 1
    display flex
    justify-content right
    margin-right 10px
    align-items center

.total span
    color red
    font-size 16px
















.footer button
    width 100px
    margin-right 12px
    background: linear-gradient(to right, rgb(251, 36, 0), rgb(255, 106, 0)) rgb(191, 17, 17);
    border-radius: 19px;
    height: 38px;
    margin-right: 12px;
    color #fff
    border 0 
    font-weight 600
</style>